import { useState, useRef, useCallback } from 'react'
import { Editor } from './components/Editor'
import { Preview } from './components/Preview'
import { ActionButtons } from './components/ActionButtons'
import styled from 'styled-components'

const AppContainer = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  height: 100vh;
  padding: 2rem;
  background-color: #f0f2f5;
  max-width: 1920px;
  margin: 0 auto;
`;

const Column = styled.div`
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  max-width: 100%;
`;

const Header = styled.div`
  grid-column: 1 / -1;
  text-align: center;
  padding: 1rem 0;
  
  h1 {
    font-size: 1.8rem;
    color: #1a1a1a;
    margin-bottom: 0.5rem;
  }
  
  p {
    color: #666;
    font-size: 1rem;
  }
`;

const initialMarkdown = `# Markdown 微信排版工具

> 微信公众号排版工具。问题或建议，请公众号留言。**[程序员翻身](#jump_8)**

建议使用 **Chrome** 浏览器，体验最佳效果。

使用微信公众号编辑器有一个十分头疼的问题：粘贴出来的代码，格式错乱，空间小还带行号，而且特别丑。本编辑器能够解决这个问题。

Markdown是一种轻量级的「标记语言」。

请阅读下方文本熟悉工具使用方法，本文可直接拷贝到微信中预览。

## 1 Markdown 简介

- 支持自定义样式的 Markdown 编辑器
- 支持微信公众号排版
- 点击右上方按钮，一键复制到微信

## 2 Markdown语法教程

### 2.1 标题

不同数量的\`#\`可以完成不同的标题，如下：

# 一级标题

## 二级标题

### 三级标题

### 2.2 字体

粗体、斜体、粗体和斜体，删除线，需要在文字前后加不同的标记符号。如下：

**这个是粗体**

*这个是斜体*

***这个是粗体加斜体***

~这里想用删除线~~

注：如果想给字体换颜色、字体或者居中显示，需要使用内嵌HTML来实现。

### 2.3 代码示例

\`\`\`javascript
// 示例代码
function greeting(name) {
  console.log(\`Hello, \${name}!\`);
}

greeting("微信公众号");
\`\`\`

### 2.4 列表示例

无序列表：

- 支持 Markdown 语法
- 支持代码高亮
- 支持图片上传
  - 支持截图粘贴
  - 支持拖拽上传

有序列表：

1. 第一步：编写内容
2. 第二步：实时预览
3. 第三步：一键复制

### 2.5 表格示例

| 特性 | 支持 | 备注 |
|:-----|:----:|-----:|
| 代码高亮 | ✓ | 支持多种语言 |
| 图片上传 | ✓ | 支持拖拽和粘贴 |
| 实时预览 | ✓ | 右侧预览 |

### 2.6 引用示例

> 使用 Markdown 可以让我们专注于内容本身，而不是排版。
> 
> 一键复制到微信公众号，让排版不再是噩梦。

---

开始编写你的文章吧！`;

function App() {
  const [markdown, setMarkdown] = useState(initialMarkdown);
  const previewRef = useRef<HTMLDivElement>(null);

  const handleMarkdownChange = useCallback((value: string) => {
    setMarkdown(value);
  }, []);

  const handleCopyToWeixin = () => {
    if (!previewRef.current) return;

    try {
      const previewContent = previewRef.current.querySelector('.wechat-preview');
      if (!previewContent) return;

      // 创建选区
      const range = document.createRange();
      range.selectNodeContents(previewContent);
      
      // 清除现有选区并选择新的内容
      const selection = window.getSelection();
      selection?.removeAllRanges();
      selection?.addRange(range);

      alert('内容已选中，请使用 Ctrl+C (Windows) 或 Command+C (Mac) 复制内容');
    } catch (error) {
      console.error('选择失败:', error);
      alert('选择失败，请手动选择并复制。');
    }
  };

  return (
    <AppContainer>
      <Header>
        <h1>Markdown 微信排版工具</h1>
        <p>一款简洁易用的微信公众号排版工具</p>
      </Header>
      <Column>
        <Editor
          initialValue={initialMarkdown}
          onChange={handleMarkdownChange}
        />
      </Column>
      <Column>
        <ActionButtons onCopyToWeixin={handleCopyToWeixin} />
        <div ref={previewRef} style={{ flex: 1, overflow: 'hidden' }}>
          <Preview markdown={markdown} />
        </div>
      </Column>
    </AppContainer>
  );
}

export default App
